<template>
	<view class="bizPage" :style="{background: current == 0 ? '#FFF' : '#F9F9F9'}">
		<status-bar title="咨询历史" />
		<view class="tabs bgwhite" :style="{top: totalHeight + 'px'}">
			<up-tabs :list="tabList" :scrollable="false" :lineColor="mainStore.color" lineWidth="40" :activeStyle="{color:'#222',fontWeight:'bold'}"
				@click="tabClick"></up-tabs>
		</view>
		<view class="list_1" v-if="current == 0">
			<view class="item d-flex a-center" @click="toUrl('/pages/chat/chat?chatId=' + item.toId + '&orderType=' + (item.orderType||'') + '&title=' + (item.typeName||''))" v-for="(item,index) in list" :key="index">
				<image class="avatar m-right20" :src="item.lawyerInfo && item.lawyerInfo.avatar ? imgUrls(item.lawyerInfo.avatar) : staticImg + 'noExist.jpg'" mode="aspectFill"></image>
				<view class="flex-1">
					<view class="m-bot10">
						<text class="size32 bold m-right20" v-if="item.lawyerInfo">{{ item.lawyerInfo.userName }}</text>
						<text class="size24 color-999">{{ tampToDate(item.sendTime) }}</text>
					</view>
					<view class="size26 color-666 ellipsis_1" v-if="item.messageType == 0 || item.messageType == 8">{{ item.content }}</view>
					<view class="size26 color-666" v-if="item.messageType == 1">[图片]</view>
					<view class="size26 color-666" v-if="item.messageType == 2">[文件]</view>
					<view class="size26 color-666" v-if="item.messageType == 5">[签订合同]</view>
					<view class="size26 color-666" v-if="item.messageType == 6">[确认结案]</view>
					<view class="size26 color-666" v-if="item.messageType == 7 || item.messageType == 9">[转账]<text v-if="item.messageType == 9">你已退还</text></view>
					<view class="size26 color-666" v-if="item.messageType == 10">[系统消息]</view>
				</view>
				<view class="badge flexac size24 white" v-if="item.unreadCount > 0">{{ item.unreadCount }}</view>
			</view>
		</view>
		<view class="list_2 padding20" v-if="current == 1">
			<view class="item bgwhite d-flex a-center m-bot20 p-re" @click="toUrl('/pages/index/index?chat_Id=' + item.id)" v-for="(item,index) in list" :key="index">
				<image class="img" :src="staticImg + 'ai-avatar.png'" mode="aspectFill"></image>
				<view class="flex-1">
					<view class="m-bot10">
						<text class="size32 bold m-right20">{{ item.title }}</text>
						<text class="size24 color-999">{{ item.createTime }}</text>
					</view>
					<view class="size26 color-666">咨询时长：{{ item.duration }}</view>
				</view>
				<view class="right_top flexac size24 white p-ab" v-if="item.continueChat">咨询中</view>
				<view class="txt size24 color-999 p-ab" v-else>已生成法律意见书</view>
			</view>
		</view>
		<view class="list_3 padding20" v-if="current == 2">
			<view class="item bgwhite d-flex a-center m-bot20" @click="toUrl('/pages/index/index?chat_Id=' + item.id)" v-for="(item,index) in list" :key="index">
				<image class="img m-right20" :src="staticImg + 'model-avatar.png'" mode="aspectFill"></image>
				<view class="flex-1">
					<view class="m-bot10">
						<text class="size32 bold m-right20">大模型咨询</text>
						<text class="size24 color-999">{{ item.createTime }}</text>
					</view>
					<view class="size26 color-666 ellipsis_1">{{ item.answer }}</view>
				</view>
			</view>
		</view>

		<up-empty :show="noData" mode="history" marginTop="100"></up-empty>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onShow, onReachBottom } from '@dcloudio/uni-app'
	import { staticImg } from '@/utils/config.js'
	import { toUrl, Toast, imgUrls, tampToDate } from '@/utils/utils.js'
	import { useMainStore } from '@/stores/index'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'
	
	const mainStore = useMainStore()
	const totalHeight = computed(() => {
		return mainStore.statusBarHeight + mainStore.navBarHeight
	})
	const current = ref(0)
	const type = ref('chat')
	const tabList = ref([
		{ name: '私人法律顾问', type: 'chat' },
		{ name: 'AI咨询', type: 'ai' },
		{ name: '大模型咨询', type: 'big' }
	])
	
	const list = ref([])
	const page = ref(1)
	const limit = ref(10)
	const noData = ref(false)
	const noMore = ref(false)
	
	onShow(() => {
		page.value = 1
		getList()
	})

	const getList = () => {
		noData.value = false
		noMore.value = false

		let url = '/api/ai/aiConsultingList'
		if(type.value == 'big') url = '/api/ai/largeModelConsultationList'
		if(type.value == 'chat') url = '/api/sys/messages/messageList'
		Http.get({
			url,
			data: {
				pageNum: page.value,
				pageSize: limit.value
			}
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			let result = res.rows || []
			list.value = page.value == 1 ? result : list.value.concat(result)
			if(!list.value.length) noData.value = true
			if(result.length < limit.value) noMore.value = true
		})
	}	
	
	const tabClick = (item) => {
		current.value = item.index
		type.value = item.type
		page.value = 1
		list.value = []
		getList()
	}

	onReachBottom(() => {
		if(noMore.value) return
		page.value ++
		getList()
	})
</script>

<style lang="scss" scoped>
	.bizPage {
		min-height: 100vh;
	}
	.tabs {
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 11;
	}     
	.list_1 {
		padding: 0 30rpx;
		margin-top: 44px;
		.item {
			height: 176rpx;
			&:not(:last-child) {
				border-bottom: 1rpx solid #F2F2F2;
			}
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.badge {
				width: 42rpx;
				height: 42rpx;
				background: #E80F0F;
				border-radius: 50%;
			}
		}
	}
	.list_2 {
		margin-top: 44px;
		.item {
			height: 214rpx;
			border-radius: 14rpx;
			.img {
				width: 218rpx;
				height: 170rpx;
				border-radius: 10rpx;
				border: 1rpx solid #F2F2F2;
				margin: 0 20rpx 0 30rpx;
			}
			.right_top {
				width: 116rpx;
				height: 44rpx;
				background: #F8800B;
				border-radius: 0rpx 14rpx 0rpx 28rpx;
				right: 0;
				top: 0;
			}
			.txt {
				right: 20rpx;
				top: 10rpx;
			}
		}
	}
	.list_3 {
		margin-top: 44px;
		.item {
			height: 160rpx;
			border-radius: 14rpx;
			padding: 0 26rpx;
			.img {
				width: 82rpx;
				height: 82rpx;
			}
		}
	}
</style>
